<template>
  <div class="AllBook">
    <div class="bg-img" v-if="state&&states">
      <img src="../../assets/img/AllBooks/3@3x.png" alt="">
    </div>
    <div v-if="!states&&!state">
      <div class="AllBooks">
        <div class="content">
          <div class="booksbodyer">
            <div class="head">
              <div class="left">
                <i class="iconfont icon-wodeshujia"></i>
                <span>我的书架</span>
              </div>
              <div class="right" @click="Edit">
                <span>{{edittext}}</span>
                <i class="iconfont icon-jinru" v-if="false"></i>
              </div>
            </div>
            <ul>
              <li class="body" v-for="(item,i) in Books" :key="i" v-if="Books.length>0">
                <div class="books">
                  <div v-for="(book,j) in item " :key="book.book_id">
                    <img :src="book.book_cover" :style="{'box-shadow':book.box}" @click="setarr(book)">
                    <div class="icon" :class="{'active':book.is_true===1}" v-if="edit!==0&&book.is_true!==-1">
                      <i class="iconfont icon-xuanzhong" v-if="book.is_true===0"></i>
                      <i class="iconfont icon-xuanzhong" v-if="book.is_true===1"></i>
                      <!--<img src="../../assets/img/Master/true.gif" v-if="book.is_true===1" alt="">-->
                    </div>
                  </div>
                </div>
                <div class="bgssd">
                </div>
                <div class="bottomts"></div>
              </li>
            </ul>
          </div>
        </div>
        <transition
          name="fadeIn"
          enter-active-class="animated fadeInUp"
          leave-active-class="animated fadeOutDown">
          <div class="foot" v-show="edit!==0">
            <div class="btn">
              <btn :obj="btnstyle" :text="btntext" v-on:statr="Delete"></btn>
            </div>
          </div>
        </transition>
        <AllbookPopup v-if="homepopup" v-on:hide="hide" :popup="popupobj" v-on:statr="Deletes"></AllbookPopup>
      </div>
      <infinite-loading @infinite='infiniteHandler' ref="infiniteLoading">
        <span slot="no-more">
        </span>
      </infinite-loading>
    </div>
    <div class="null" v-if="states">
      <div class="contens">
        <div><i class="iconfont icon-wodeshuji-kongbaiye"></i></div>
        <div>你还没有添加任何书籍哦</div>
        <div>
          <p @click="gohome('Home')">立即添加 <i class="iconfont icon-jinru"></i></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import btn from '../../components/btn/index'
  import AllbookPopup from '../../components/AllbookPopup/index'
  import InfiniteLoading from 'vue-infinite-loading';

  export default {
    name: 'index',
    data: function () {
      return {
        edit: 0,
        Browsing: 0,
        state: true,
        states: true,
        edittext: '编辑',
        items: {},
        loading: true,
        data: {
          page_index: 0
        },
        totalPage: 100,
        homepopup: false,
        popupobj: {
          title: '温馨提示',
          content: '确认删除所选的书籍吗？',
          btntext: '确认删除'
        },
        books_data: [],
        // books: [],
        btnstyle:
          {
            backgroundColor: '#ccc',
            color: '#fff',
            width: '100%',
            height: '3.5rem',
            fontSize: '1.5rem',
            fontWeight: 'normal',
            opacity: 1,
            boxShadow: '0 10px 24px 0 rgba(0, 0, 0, 0.08)'
          }
        ,
        btntext: '删除书籍',
        ids: [],
        Books: [],

        listboss: []
      }
    },
    created: function () {
    },
    computed: {
      Bookss: {
        get: function () {
          return this.tojson(this.books_data)
        },
        set: function (obj) {
          this.books_data = obj
        }
      }
    },
    mounted: function () {
      this.update()
      // this.booklist = this.tojson(this.data)
    },
    watch: {
      'ids': 'activefun'
    },
    methods: {
      format: function () {

      },
      update: function () {
        this.data.page_index += 1
        this.$axios.books_shelf_list(this.data).then(res => {
          this.state = false
          if (this.data.page_index === 1 && res.data.qing_data.book_shelf.length === 0) {
            this.states = true
            return
          }
          if (res.data.qing_code === 303 || res.data.qing_data.book_shelf.length === 0) {
            this.states = true
          }
          if (res.data.qing_code === 303) {
            this.loading = true
            return
          }
          if (res.data.qing_data.total > this.data.page_index) {
            this.loading = true
          } else {
            this.loading = false
          }
          if (res.data.qing_data.last_book) {
            this.total = res.data.qing_data.total + 2
            this.items = res.data.qing_data
          }
          this.state = false
          this.states = false
          this.books_data.push.apply(this.books_data, res.data.qing_data.book_shelf)
          this.books_data.forEach((item, i) => {
            item.is_true = 0
            item.box = '0px 8px 16px rgba(0, 0, 0, 0.2)'
            item.index = i
          })
          this.Books = this.tojson(this.books_data)
        })
      },
      Edit: function () {
        if (this.edit === 0) {
          this.edit = 1
          this.edittext = '取消'
        } else {
          this.edit = 0
          this.edittext = '编辑'
          this.books_data.forEach((item, i) => {
            item.is_true = 0
            item.box = '0 10px 20px 0 rgba(0, 0, 0, 0.2)'
            item.index = i
          })
          this.Books = this.tojson(this.books_data)
        }
      },
      activefun: function (val) {
        if (val.length > 0) {
          this.btnstyle.boxShadow = '0 10px 24px 0 rgba(46, 185, 255, 0.4)'
          this.btnstyle.backgroundColor = '#2eb9ff'
        } else {
          this.btnstyle.boxShadow = '0 10px 24px 0 rgba(0, 0, 0, 0.08)'
          this.btnstyle.backgroundColor = '#ccc'
        }
      },
      tojson: function (arr) {
        // var arrs = [{
        //   book_cover: require('../../assets/img/BookShelf/chang1.png'),
        //   is_true: -1,
        //   index: -1,
        //   box: 'none',
        //   book_id: -1
        // }]
        var arrs = []
        arrs = arrs.concat(arr)
        var num = 3;
        var Arr = new Array(Math.ceil(arrs.length / num));
        for (var i = 0; i < Arr.length; i++) {
          Arr[i] = new Array();
          for (var j = 0; j < num; j++) {
            Arr[i][j] = '';
          }
        }
        for (var i = 0; i < arrs.length; i++) {
          Arr[parseInt(i / num)][i % num] = arrs[i];
        }
        return Arr
      },
      go: function (str) {
        return this.$router.push({
          name: str
        })
      },
      gohome: function (str) {
        sessionStorage.setItem('Home', 'Books')
        return this.$router.push({
          name: str
        })
      },
      goChapters: function (id, platform_book_id) {
        this.$router.push({
          name: 'Chapter',
          query: {
            book_id: id,
            platform_book_id: platform_book_id
          }
        })
      },
      setarr: function (obj) {
        var _this = this
        if (obj.index === -1) {
          this.go('Collection')
          return false
        }
        var arr = []
        arr = arr.concat(this.books_data)
        if (this.edit === 0) {
          this.goChapters(obj.book_id, obj.platform_book_id)
        } else if (this.edit = 1) {
          if (arr[obj.index].is_true === 0) {
            arr[obj.index].is_true = 1
          } else if (arr[obj.index].is_true === 1) {
            arr[obj.index].is_true = 0
          }
          this.Books = this.tojson(arr)
          _this.ids = []
          arr.forEach((item) => {
            if (item.is_true === 1) {
              _this.ids.push(item.user_books_read_record_id)
            }
          })
        }
      },
      Delete: function () {
        if (this.ids.length === 0) {
          return
        }
        this.homepopup = true
      },
      hide: function () {
        this.homepopup = false
      },
      Deletes: function () {
        if (this.ids.length === 0) {
          return
        }
        var _this = this
        this.$axios.book_delete({user_books_read_record_ids: this.ids}).then(res => {
          if (res.data.qing_code === 100) {
            if (this.ids.length === this.books_data.length) {
              this.ids = []
              this.books_data = []
              this.states = true
            } else {
              this.books_data.forEach((item, i) => {
                if (item.is_true === 1) {
                  _this.books_data.splice(i, 1)
                }
              })
            }
            this.ids = []
            this.homepopup = false
            this.Edit()
          }
        })
      },
      infiniteHandler: function ($state) {
        this.data.page_index += 1
        if (this.data.page_index > this.totalPage) {
          $state.complete();
          return
        }
        this.$axios.books_shelf_list(this.data).then(res => {
          this.state = false
          if (res.data.qing_code === 303) {
            $state.complete();
            return
          }
          if (res.data.qing_data.total) {
            this.totalPage = res.data.qing_data.total
          }
          if (res.data.qing_data.last_book) {
            this.items = res.data.qing_data
          }
          this.books_data.push.apply(this.books_data, res.data.qing_data.book_shelf)
          this.books_data.forEach((item, i) => {
            item.is_true = 0
            item.box = '0 10px 20px 0 rgba(0, 0, 0, 0.2)'
            item.index = i
          })
          this.Books = this.tojson(this.books_data)
          $state.loaded();
        })
      }
    },
    components: {btn, AllbookPopup, InfiniteLoading}
  }
</script>

<style scoped>
  @import "../../assets/css/views/AllBooks/index.css";
</style>
